<template>
	<div>
		<el-table :data="tableData" stripe style="width: 100%">
			<el-table-column prop="name" label="考试名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="examDuration" label="试卷类型" width="80">
				<template slot-scope="{ row }">
					<span>
						{{ row.testPaper.paperType == 1 ? '普通试卷' : '随机试卷' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="permission" label="考试时间" width="160">
				<template slot-scope="{ row }">
					<p>{{ row.startTime }}</p>
					<p>{{ row.endTime }}</p>
				</template>
			</el-table-column>
			<el-table-column prop="examDuration" label="考试时长" width="80">
				<template slot-scope="{ row }">
					<b>{{ row.examDuration }}</b>
					分钟
				</template>
			</el-table-column>
			<el-table-column prop="passScore" label="卷面总分" width="80">
				<template slot-scope="{ row }">
					<b>{{ toFixeds(row.testPaper.totalScore) }}</b>
					分
				</template>
			</el-table-column>
			<el-table-column prop="passScore" label="及格分" width="80">
				<template slot-scope="{ row }">
					<b>{{ toFixeds(row.passScore) }}</b>
					分
				</template>
			</el-table-column>
			<el-table-column prop="examMaxNum" label="考试次数" width="80">
				<template slot-scope="{ row }">{{ row.overExamNum }} / {{ row.examMaxNum }}</template>
			</el-table-column>

			<el-table-column label="操作" width="120">
				<template slot-scope="{ row }">
					<!-- <el-button-group> -->
					<el-button v-if="examStatus(row) == 1" type="success" size="mini" plain disabled>考试未开始</el-button>
					<el-button v-if="examStatus(row) == 2" type="warning" size="mini" plain disabled>考试已结束</el-button>
					<el-button v-if="examStatus(row) == 3" type="primary" size="mini" :disabled="row.examMaxNum - row.overExamNum <= 0" @click="handleExam(row)">
						开始考试
					</el-button>
					<!-- </el-button-group> -->
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg">
				<el-empty :image-size="200"></el-empty>
			</div>
		</el-table>
		<Pagination v-show="parseInt(pageObj.count) > 0" :total="parseInt(pageObj.count)" @change="getList" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
	</div>
</template>
<script>
import moment from 'moment';
export default {
	data() {
		return {
			listQuery: {
				page: 1,
				limit: 10
			},
			tableData: [],
			pageObj: {}
		};
	},
	computed: {
		examStatus() {
			return function (v) {
				let now = Date.now();
				let { startTime, endTime } = v;
				startTime = moment(startTime).valueOf();
				endTime = moment(endTime).valueOf();
				if (startTime > now) {
					return 1; //考试未开始
				} else if (now > endTime) {
					return 2; //考试已结束
				} else {
					return 3; //可以考试
				}
			};
		}
	},
	mounted() {
		this.getList();
	},
	methods: {
		async getList() {
			let res = await this.$store.dispatch('testExamQueryMyEXAM', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
		},

		handleExam(row) {
			this.$bus.$emit('showDialogExamConfirm', row);
		}
	}
};
</script>
<style scoped lang="scss"></style>
